import { Button, Form, Input, Tabs, message, Col, Row, Space } from 'antd';
import Head from 'next/head';

import { FormattedMessage, useIntl } from 'react-intl';
import { SiteLayout } from '@/components/Layout';
import { useState } from 'react';
type LoginType = 'phone' | 'account';
import { requestMsg } from '@/components/server/utils/request';
import { useRouter } from 'next/router';
import type { response } from '@/apps';

export default function Home() {
  const router = useRouter();
  const [messageApi, contextHolder] = message.useMessage();
  const intl = useIntl();
  const [loginType, setLoginType] = useState<LoginType>('account');
  return (
    <>
      {contextHolder}
      <Head>
        <link
          rel="shortcut icon"
          type="image/x-icon"
          href="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico"
        />
        <title>{intl.formatMessage({ id: 'login.title' })}</title>
      </Head>
      <Row align={'middle'}>
        <Col sm={24} xs={24} lg={8} md={8}></Col>
        <Col sm={24} xs={24} lg={8} md={8} style={{ minHeight: 50 }}>
          <Form
            onFinish={async (formData) => {
              // message.info(JSON.stringify(formData));
              requestMsg<response>('/api/login', {
                method: 'post',
                data: formData,
              }).then(() => {
                router.push('/admin/post/list');
              });
            }}
          >
            <Tabs
              centered
              activeKey={loginType}
              onChange={(activeKey) => setLoginType(activeKey as LoginType)}
              items={[
                {
                  key: 'account',
                  label: '账号密码登录',
                  children: (
                    <>
                      <Form.Item
                        name="loginType"
                        initialValue={'PASSWORD'}
                        hidden
                      >
                        <Input value={'PASSWORD'} />
                      </Form.Item>
                      <Form.Item
                        name="username"
                        rules={[
                          {
                            required: true,
                            message: '请输入用户名！',
                          },
                        ]}
                      >
                        <Input
                          placeholder={intl.formatMessage({
                            id: 'login.username',
                          })}
                        />
                      </Form.Item>
                      <Form.Item
                        name="password"
                        rules={[
                          {
                            required: true,
                            message: '请输入密码！',
                          },
                        ]}
                      >
                        <Input.Password
                          placeholder={intl.formatMessage({
                            id: 'login.password',
                          })}
                        />
                      </Form.Item>
                    </>
                  ),
                },
                {
                  key: 'phone',
                  label: '手机号登录',
                  disabled: true,
                  children: (
                    <Form.Item id={loginType} hidden>
                      <Input hidden={true} value={'MOBI'} />
                    </Form.Item>
                  ),
                },
              ]}
            ></Tabs>

            <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
              <Space>
                <Button type="primary" htmlType="submit">
                  <FormattedMessage id="login.title" />
                </Button>
                <Button
                  type="default"
                  onClick={() => {
                    messageApi.info('暂不支持,请直接联系站长开通。');
                  }}
                >
                  <FormattedMessage id="login.reg" />
                </Button>
              </Space>
            </Form.Item>
          </Form>
        </Col>
        <Col sm={24} xs={24} lg={8} md={8}></Col>
      </Row>
    </>
  );
}
Home.Layout = SiteLayout;
